<template>
	<div class="pages">
		 <HeaderTop :title="name"/>
         <div class="chat-input" ref="chat">
         	<input class="chat-ipt" v-model="messages" />
         	<img class="chat-icon" :src="imgUrl" @click="make_face"  />
         	<div class="send-btn" @click="sendMessage">发送</div>
         </div>
	</div>
</template>

<script>
    import HeaderTop from '../../components/HeaderTop/HeaderTop.vue'
	export default {
         data(){
             return {
                 name:"客服",
                 messages:"",
                 imgUrl:require("../../pages/kefu/images/chat-icon.png"),
             }
         },
         methods:{
            sendMessage(){
                alert("mes")
            }  
         },
          components:{
              HeaderTop
          }
	}
</script>

<style lang="stylus" rel="stylesheet/stylus">
    @import "../../common/stylus/mixins.styl"
            .chat-input
                padding 13px 15px 12px 15px
                height 30px
                background-color #FFFFFF
                border-top 1px solid #F2F2F2
                display flex
                justify-content space-between
                position fixed
                bottom 50px
                line-height 20px
                .chat-ipt 
                    width 245px
                    height 35px
                    border 1px solid #e9e9e9
                    border-radius 4px
                    float left
                .chat-icon 
                    margin 4px 8px
                    width 27px
                    height 27px
                    
                .send-btn   
                    height 22px
                    float right
                    font-size 15px
                    color #FFFFFF
                    font-weight bold
                    display flex
                    justify-content center
                    align-items center
                    padding 8px 11px
                    border-radius 5px
                    background linear-gradient(#FBAD3B, #F8901D)
</style>
